<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title>注册</title>
	<link rel="stylesheet" href="bootstrap-4.6.0-dist\css\bootstrap.min.css">
	<link rel="stylesheet" href="bootstrap-4.6.0-dist\css\bootstrap-icons.css">
	<link rel="stylesheet" href="css\reg.css">
	<script src="../static/js/jquery.min.1.10.2.js"></script>
	<script src="../static/js/commonutil.js"></script>
</head>
<body>
	<div class="d1">
		<div class="dv1">
			<h2>管理系统登录</h2>
			<div class="tl">
				注册
			</div>
			<form>
			  <div class="form-group">
			    <label>账号</label>
			    <input type="text" name="username" id="zh" class="form-control" placeholder="账号" onblur="check(this)">
			    <div id="red" ></div>
			  </div>

			  <div class="form-group">
			    <label>密码</label>
			    <input type="password" name="password" class="form-control" placeholder="密码">
			  </div>

			  <div class="form-group">
			    <label>确认密码</label>
			    <input type="password" class="form-control" placeholder="确认密码">
			  </div>

			  <button class="btn btn-primary" onclick="tj()">注册</button>
			</form>
		</div>
		<div class="dv2">
			已有账号，<a href="login.html">登录</a>
		</div>
	</div>
	
<script>


	var state=true;//账号是否冲突，用在提交时
	
	function check(o){
		if(!o.value){
			return
		}
		
		utils.getData('/manage/login/checkreg?username='+o.value,function(data){
			if(data==false){
				$("#red").html('该账号已存在');
				state=false;
			}else{
				$("#red").html('');
				state=true;
			}
		})
		
	}

	function tj(){
		
		event.preventDefault();
		
		if(!state){
			return;
		}
		
		var pds = document.querySelectorAll("input");
		if(pds[0].value=='' || pds[1].value=='' || pds[2].value==''){
			alert("信息不能为空");
			return;
		}
		if(pds[1].value!=pds[2].value){
			alert("两次输入的密码不同，请重新输入");
			return;
		}
		
		utils.searchForm($('form').serialize(),'/manage/login/reg',function(msg){
			if(msg==1){
				alert("注册成功");
				location.href="login.html";
			}else{
				alert("注册失败，请稍后再试");
			}
		});
		
	}

</script>
</body>
</html>